<template>
  <div>
    <transition :name="transitionName">
      <div class="hanManual" @mousedown.stop='handleBox' @mouseleave.stop='handleleave'>
        <div class="content">
          <slot name='content'></slot>
        </div>
        <!-- @mousedown.stop='handleDownL' -->
        <!-- @mousedown.stop='handleDownT' -->
        <div class="border-r" @mousedown.stop='handleDownR'></div>
        <div class="border-l"></div>
        <div class="border-t"></div>
        <div class="border-b" @mousedown.stop='handleDownB'></div>
      </div>
    </transition>
  </div>
</template>
<script>
  import '@/factory/dialog.js'
  export default {
    name: 'autodialog',
    data() {
      return {
        // show: false
        isShow: false,
        transitionName: 'moveR',
        boxTop: 0,
        boxBottom: 0,
        finalWidth: 0
      }
    },
    props: {
      show: {
        type: Boolean,
        default: false
      },
      minWidth: {
        type: Number,
        default: 100
      },
      minHeight: {
        type: Number,
        default: 100
      }
    },
    watch: {
      show(val) {
        this.isShow = val
        console.log(this.isShow)
      }
    },
    created() {
    },
    mounted() {
    },
    // 目前还存在的问题，鼠标移动的时候如果小于最小高度的时候，设置为最小高度，会出现闪动现象
    // 鼠标离开弹框收起的功能和div拖动放大的功能还存在问题
    methods: {

      moveFun() {
        // document.onmousemove = (e) => {
        //   var box = document.getElementsByClassName('hanManual')[0]
        //   if (e.clientY > this.boxTop && e.clientY < this.boxBottom) {
        //     if (e.clientX == document.body.clientWidth && box.style.left == (document.body.clientWidth - this.finalWidth) + 'px') {
        //       this.isShow = true
        //       box.style.top = this.boxTop + 'px'
        //       box.style.width = this.finalWidth + 'px'
        //     }
        //     if (e.clientX == 0 && box.style.left == '0px') {
        //       this.isShow = true
        //       box.style.top = this.boxTop + 'px'
        //       box.style.width = this.finalWidth + 'px'
        //     }
        //   }
        // }
      },
      // 鼠标离开
      handleleave() {
        console.log('鼠标离开')
        var box = document.getElementsByClassName('hanManual')[0]
        this.boxTop = box.offsetTop
        this.boxBottom = box.offsetTop + box.offsetHeight
        if (box.offsetLeft == document.body.clientWidth - box.offsetWidth) {
          this.isShow = false
        }
        if (box.offsetLeft == 0) {
          this.isShow = false
        }
        this.moveFun()
      },
      // 拖动整个div
      handleBox(e) {
        console.log('拖动整个div')
        let that = this
        var box = document.getElementsByClassName('hanManual')[0]
        box.style.cursor = 'move'
        const disX = e.clientX - box.offsetLeft
        const disY = e.clientY - box.offsetTop
        let boxWidth = box.offsetWidth
        let boxHeight = box.offsetHeight
        this.finalWidth = boxWidth
        let bodyHeight = document.body.clientHeight
        let bodyWidth = document.body.clientWidth
        const sty = box.currentStyle || window.getComputedStyle(box, null)
        let styL, styT
        if (sty.left.includes('%')) {
          styL = +document.body.clientWidth * (+sty.left.replace(/\%/g, '') / 100)
          styT = +document.body.clientHeight * (+sty.top.replace(/\%/g, '') / 100)
        } else {
          styL = +sty.left.replace(/\px/g, '')
          styT = +sty.top.replace(/\px/g, '')
        }
        document.onmousemove = function (e) {
          // 通过事件委托，计算移动的距离
          let l = e.clientX - disX
          let t = e.clientY - disY

          if ((l + boxWidth) > bodyWidth) {
            l = bodyWidth - box.offsetWidth
            that.transitionName = 'moveR'
          } else if (l < 0 || l == 0) {
            l = 0
            that.transitionName = 'moveL'
          }

          if ((t + boxHeight) > bodyHeight) {
            t = bodyHeight - boxHeight
          } else if (t < 0) {
            t = 0
          }

          // if (l == 0) {

          // } 

          // 移动当前元素
          // box.style.left = `${l + styL}px`
          // box.style.top = `${t + styT}px`
          // console.log(this.transitionName)
          box.style.left = l + 'px'
          box.style.top = t + 'px'
        }
        this.clearMouse(e)
      },
      // 右边
      handleDownR(e) {
        console.log('拖动鼠标右边方法')
        var box = document.getElementsByClassName('hanManual')[0]
        let that = this
        // 鼠标开始的位置
        var startX = e.clientX
        let boxWidth = box.offsetWidth
        let bodyWidth = document.body.offsetWidth
        document.onmousemove = function (e) {
          var endX = e.clientX
          var moveLen = endX - startX
          var finnalWidth = boxWidth + moveLen
          if (finnalWidth > bodyWidth) {
            finnalWidth = bodyWidth - 20
          }
          if (finnalWidth < that.minWidth) {
            finnalWidth = that.minWidth
          }
          box.style.width = finnalWidth + 'px'
        }
        this.clearMouse(e)
      },
      // 左边
      handleDownL(e) {
        console.log('拖动鼠标左边')
        var box = document.getElementsByClassName('hanManual')[0]
        let that = this
        // 鼠标开始的位置
        var startX = e.clientX
        let boxWidth = box.offsetWidth
        let bodyWidth = document.body.offsetWidth
        let left = box.offsetLeft
        document.onmousemove = function (e) {
          var endX = e.clientX
          var moveLen = endX - startX
          var finnalWidth = boxWidth - moveLen
          if (finnalWidth > bodyWidth) {
            finnalWidth = bodyWidth
          }
          let leftLen
          console.log(finnalWidth,)
          // if (finnalWidth < that.minWidth) {
          //   document.onmousemove = null;
          //   finnalWidth = that.minWidth
          // }
          leftLen = left + moveLen
          box.style.left = leftLen + 'px'
          box.style.width = finnalWidth + 'px'
        }
        this.clearMouse(e)
      },
      // 上
      handleDownT(e) {
        console.log('拖动鼠标上边')
        var box = document.getElementsByClassName('hanManual')[0]
        let that = this
        // 鼠标开始的位置
        var startY = e.clientY
        let boxHeight = box.offsetHeight
        let top = box.offsetTop
        let bodyHeight = document.body.offsetHeight
        document.onmousemove = function (e) {
          var endY = e.clientY
          var moveLen = endY - startY
          console.log(moveLen, '移动距离')
          var finnalHeight = boxHeight - moveLen

          if (finnalHeight > bodyHeight) {
            finnalHeight = bodyHeight
          }
          // if (finnalHeight < that.minHeight) {
          //   finnalHeight = that.minHeight
          //   // finnalTop = bodyHeight - that.minHeight
          //   document.onmousemove = null;
          // }
          var finnalTop = top + moveLen
          box.style.top = finnalTop + 'px'
          box.style.height = finnalHeight + 'px'
        }
        this.clearMouse(e)
      },
      // 底
      handleDownB(e) {
        console.log('拖动鼠标底部')
        var box = document.getElementsByClassName('hanManual')[0]
        let that = this
        // 鼠标开始的位置
        var startY = e.clientY
        let boxHeight = box.offsetHeight
        let bodyHeight = document.body.offsetHeight
        document.onmousemove = function (e) {
          var endY = e.clientY
          var moveLen = endY - startY
          var finnalHeight = boxHeight + moveLen
          if (finnalHeight > bodyHeight) {
            finnalHeight = bodyHeight
          }
          if (finnalHeight < that.minHeight) {
            finnalHeight = that.minHeight
          }
          box.style.height = finnalHeight + 'px'
        }
        this.clearMouse(e)
      },
      clearMouse(e) {
        var box = document.getElementsByClassName('hanManual')[0]
        document.onmouseup = function (e) {
          document.onmousemove = null;
          document.onmouseup = null;
          box.releaseCapture && box.releaseCapture()
        }
      }
    },
  }
</script>
<style scoped lang="scss">
  .hanManual {
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 50%;
    overflow: hidden;

    .border-l {
      position: absolute;
      left: 0;
      width: 1px;
      height: 100%;
      background-color: black;
      cursor: w-resize;
    }

    .border-r {
      position: absolute;
      right: 0;
      width: 1px;
      height: 100%;
      background-color: black;
      cursor: e-resize;
    }

    .border-t {
      position: absolute;
      top: 0;
      width: calc(100% - 1px);
      height: 1px;
      background-color: black;
      cursor: n-resize;
    }

    .border-b {
      position: absolute;
      bottom: 0;
      width: calc(100% - 1px);
      height: 1px;
      background-color: black;
      cursor: s-resize;
    }

    .content {
      position: absolute;
      width: 100%;
      height: 100%;
      background-color: red;
    }
  }

  .closeDialog {
    transition: width 1s;
    -webkit-transition: width 1s;
  }

  .moveR-enter-active,
  .moveR-leave-active {
    transition: all 0.3s linear;
    transform: translateX(0);
  }

  .moveR-enter,
  .moveR-leave {
    transform: translateX(100%);
  }

  .moveR-leave-to {
    transform: translateX(100%);
  }

  .moveL-enter-active,
  .moveL-leave-active {
    transition: all 0.3s linear;
    transform: translateX(0);
  }

  .moveL-enter,
  .moveL-leave {
    transform: translateX(-100%);
  }

  .moveL-leave-to {
    transform: translateX(-100%);
  }
</style>